<template>
  <div style="padding-top: 100px;">
    <div ref="simpleChart" class="simple"></div>
    <MultiAxisCombinationChart  ref="bottomChart" agile style="position:relative;top: -80px;"/>
  </div>
</template>
<script>
 import MultiAxisCombinationChart from "@/component/MultiAxisCombinationChart/index.vue"
 import {option,xConfig}  from "./option.js"
 import {simpleOption}  from "./simpleOption.js"
 import * as echarts from 'echarts'
export default {
  components: {
    MultiAxisCombinationChart
  },
  data() {
    return {
      simpleChart: null
    }
  },
  beforeUnmount() {
    //window.removeEventListener('resize', this.handleResize);

  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.bottomChart.setTreatedOption(option,xConfig,[
        {
          name: 'Input量',
          type: 'value',
          nameGap: 30,
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            padding: [0, 100, 0, 0]  // 上、右、下、左；这里左边 10px 可以向右偏移
          },
        },
        {
          name: this.defectType === "RATIO" ? "不良Ratio" : "不良数Ratio",
          type: 'value',
          nameGap: 30,
          axisLine: {
            show: true,
          },
          nameTextStyle: {
            padding: [0, 0, 0, 100]  // 上、右、下、左；这里左边 10px 可以向右偏移
          },
          axisLabel: {
            formatter: (value) => {
              return this.defectType === "RATIO" ? value + "%" : value
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
      ])
      this.$refs.bottomChart.chart.on('dataZoom',(params)=>{
        console.log(params)
      })
      this.simpleChart = echarts.init(this.$refs.simpleChart)
      this.simpleChart.setOption(simpleOption)
      const chartA = this.$refs.bottomChart.chart;  // A
      const chartB = this.simpleChart;               // B
      chartA.group = 'group1';
      chartB.group = 'group1';
      echarts.connect('group1');

      chartB.on('legendselectchanged', params => {
        const name = params.name;
        const selected = params.selected;
        if(['MDL投入的panel数量', 'T0 亮点Ratio'].includes(name)){
          // 控制 A 图
          chartA.dispatchAction({
            type: selected[name] ? 'legendSelect' : 'legendUnSelect',
            name
          });
        }else{
          // // 控制 B 图
          chartB.dispatchAction({
            type: selected[name] ? 'legendSelect' : 'legendUnSelect',
            name
          });
        }
      });
      window.addEventListener('resize', () => {
        chartA.resize();
        chartB.resize();
      });
     // setTimeout(()=>{
     //   const ecModel = this.simpleChart.getModel();
     //   const gridModel = ecModel.getComponent('grid', 0);
     //   if (gridModel.coordinateSystem) {
     //     const rect = gridModel.coordinateSystem.getRect();
     //     console.log('单层:', rect);
     //   } else {
     //     console.warn('gridModel.coordinateSystem 未初始化，需等渲染完再取');
     //   }
     //
     // },2000)
     //
     //  this.$refs.bottomChart.chart.on('finished', () => {
     //    const ecModel = this.$refs.bottomChart.chart.getModel();
     //    const gridModel = ecModel.getComponent('grid', 0);
     //    const rect = gridModel.coordinateSystem?.getRect();
     //    console.log('多轴', rect);
     //  });

    })
  }
}
</script>

<style scoped lang="stylus">
.simple{
  width 100%
  height 400px
}
</style>